/** * @author: Yujq * @date: 2023/11/24 18:25 * @project: saas酒店 */
<template>
  <div class="cell-wrapper">
    <div class="cell-box">
      <div class="mask" v-if="disabled"></div>
      <van-cell :title="title">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template>
          <van-switch v-model="checked" @change="handleSwitchChange" />
        </template>
      </van-cell>
    </div>
    <van-cell
      v-if="showTimer"
      :value="lightValue"
      :title="subTitle"
      is-link
      @click="handleLightPicker"
    ></van-cell>

    <!-- 夜灯定时弹框 -->
    <van-popup v-model="show" position="bottom" @open="handleOpen">
      <div class="popup">
        <!-- title -->
        <div class="toolbar">
          <div class="cancel" @click="show = false">取消</div>
          <div class="title">夜灯定时设置</div>
          <div class="confirm" @click="handleConfirm">确定</div>
        </div>
        <!-- 定时开关 -->
        <van-cell title="定时开关">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template>
            <van-switch v-model="pickerChecked" />
          </template>
        </van-cell>

        <!-- 定时时间  -->
        <div class="picker-box">
          <div class="mask" v-if="!pickerChecked"></div>
          <van-picker :columns="columns" @change="onPickerChange"></van-picker>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { device } from 'aliyun-livinglink-sdk'
import { hColumn } from '../utils/enum'
import { Toast } from 'vant'

export default {
  name: 'CellPannel',
  components: {},
  props: {
    title: String,
    subTitle: String,
    lightValue: String,
    showTimer: {
      type: Boolean,
      default: false
    },
    swingVal: {
      type: Number,
      default: 0
    },
    nightLightStartTime: {
      type: Number,
      default: 0
    },
    nightLightEndTime: {
      type: Number,
      default: 0
    },
    deviceIdentidy: Object,
    illumination: Number,
    nightLight: Number,
    switchKey: String,
    disabled: Boolean,
    checkVal: Number,
    illuminationVal: Number,
    nightLightVal: Number
  },
  data() {
    return {
      checked: false,
      show: false, // 夜灯定时弹框 show
      pickerChecked: false, // 定时开关 checked
      columns: [
        // 第一列
        {
          values: hColumn(),
          defaultIndex: 0
        },
        // 第二列
        {
          values: hColumn(),
          defaultIndex: 0
        }
      ],
      pickerValues: []
    }
  },
  watch: {
    pickerValues: {
      handler(val) {
        this.columns[0].defaultIndex = val[0]
        this.columns[1].defaultIndex = val[1]
      },
      immediate: true,
      deep: true
    },
    checkVal: {
      handler(val) {
        console.log('checkVal:', val)
        this.checked = val == 1 ? true : false
      },
      immediate: true,
      deep: true
    },
    swingVal: {
      handler(val) {
        this.checked = val == 1 ? true : false
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleSwitchChange(val) {
      if (this.switchKey == 'angleAutoOnOff') {
        const swing = val ? 1 : 0
        this.$emit('emitSwing', swing)
        device
          .setProps(this.deviceIdentidy, {
            angleAutoOnOff: val ? 1 : 0
          })
          .then(res => {
            console.log(res, '设置成功了！！ ')
            // success
          })
          .catch(err => {
            console.log(err, 'err')
            // fail
          })
      } else if (this.switchKey == 'illumination') {
        const swing = val ? 1 : 0
        this.$emit('emitIllumination', swing)
        device
          .setProps(this.deviceIdentidy, {
            illumination: val ? 1 : 0
          })
          .then(res => {
            console.log(res, val, '设置成功了！！ ')
            // success
          })
          .catch(err => {
            console.log(err, 'err')
            // fail
          })
      } else if (this.switchKey == 'nightLight') {
        const swing = val ? 1 : 0
        this.$emit('emitNightLight', swing)
        device
          .setProps(this.deviceIdentidy, {
            nightLight: val ? 1 : 0
          })
          .then(res => {
            console.log(res, val, '设置成功了！！ ')
            // success
          })
          .catch(err => {
            console.log(err, 'err')
            // fail
          })
      }
    },
    onPickerChange(picker, values) {
      this.pickerValues = values
    },
    handleLightPicker() {
      this.show = true
    },
    handleConfirm() {
      // 如果没有开启定时，下发00，关闭
      if (!this.pickerChecked) {
        this.pickerValues = [0, 0]
      } else {
        // 判断结束时间大于开始时间
        if (this.pickerValues[1] <= this.pickerValues[0]) {
          if (this.pickerValues[1] === 0 && this.pickerValues[0] === 0) {
            console.log('下发关闭')
          } else {
            Toast('结束时间不能小于开始时间!')
            return
          }
        }
      }

      this.$emit('emitSettime', this.pickerValues)
      this.show = false

      device.setProps(this.deviceIdentidy, {
        nightLightStartTime: this.pickerValues[0],
        nightLightEndTime: this.pickerValues[1]
      })
    },
    handleOpen() {
      this.pickerValues = [this.nightLightStartTime, this.nightLightEndTime]
    }
  }
}
</script>

<style lang="less">
.cell-wrapper {
  .cell-box,
  .picker-box {
    position: relative;
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 11;
    }
  }
  .popup {
    background-color: #f6f6f9;
    padding-bottom: 20px;
    .van-cell {
      margin: 15px 15px 10px;
      width: calc(100% - 30px);
      border-radius: 5px;
    }
  }

  .van-picker {
    margin: 0 15px;
    border-radius: 5px;
  }
  .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 52px;
    padding: 0 15px;

    & > div {
      font-size: 16px;
    }
    .cancel {
      color: #4a5a78;
    }
    .title {
      font-weight: bold;
      color: #2b3852;
    }
    .confirm {
      color: var(--primary-color);
    }
  }
  margin-bottom: 10px;
  .van-cell {
    display: flex;
    align-items: center;
  }
  .van-cell__value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .van-cell::after {
    border: 0;
  }
  .van-cell__value {
    width: 42px !important;
    height: 36px !important;
    overflow: initial !important;
    padding-right: 10px !important;
    .van-switch {
      width: 30px !important;
      height: 4px !important;
      background-color: #ced5e0 !important;
      border: 0;
    }
    .van-switch--on {
      background-color: var(--primary-color) !important;
    }
    .van-switch__node {
      margin-top: -10px !important;
      width: 25px !important;
      height: 25px !important;
      box-shadow: 0 0 10px rgba(0, 0, 6px, 0.1) !important;
      left: -12px;
    }
  }
}
</style>
